import React from 'react';
import { Player, GameMode } from '../types/game';
import { Trophy, Users, Bot, RotateCcw, ArrowLeft } from 'lucide-react';
import { Piece } from './Piece';

interface GameResultModalProps {
  isOpen: boolean;
  winner: Player;
  gameMode: GameMode;
  moveCount: number;
  onRestart: () => void;
  onBackToMode: () => void;
}

export const GameResultModal: React.FC<GameResultModalProps> = ({
  isOpen,
  winner,
  gameMode,
  moveCount,
  onRestart,
  onBackToMode,
}) => {
  if (!isOpen || !winner) return null;

  const getWinnerInfo = () => {
    if (winner === 'black') {
      return {
        name: '黑棋获胜',
        description: gameMode === 'ai' ? '恭喜你获胜！' : '玩家1获胜！',
        icon: Trophy,
        color: 'text-neutral-900',
        bgColor: 'bg-neutral-900',
      };
    } else {
      return {
        name: '白棋获胜',
        description: gameMode === 'ai' ? 'AI获胜，再接再厉！' : '玩家2获胜！',
        icon: gameMode === 'ai' ? Bot : Users,
        color: 'text-neutral-600',
        bgColor: 'bg-neutral-100',
      };
    }
  };

  const winnerInfo = getWinnerInfo();
  const Icon = winnerInfo.icon;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* 遮罩层 */}
      <div className="absolute inset-0 bg-black bg-opacity-50 transition-opacity duration-normal" />
      
      {/* 模态框 */}
      <div className="
        relative bg-white rounded-xl p-8 max-w-sm w-full mx-4
        shadow-modal animate-slide-up
      ">
        {/* 关闭按钮 */}
        <button
          onClick={onBackToMode}
          className="
            absolute top-4 right-4 w-8 h-8 flex items-center justify-center
            text-neutral-400 hover:text-neutral-600 rounded-full
            hover:bg-neutral-100 transition-colors duration-fast
            focus:outline-none focus:ring-2 focus:ring-neutral-400
          "
        >
          ×
        </button>

        {/* 获胜信息 */}
        <div className="text-center mb-6">
          {/* 获胜图标 */}
          <div className={`
            w-16 h-16 ${winnerInfo.bgColor} rounded-full flex items-center justify-center mx-auto mb-4
          `}>
            <Icon className={`w-8 h-8 ${winnerInfo.color}`} />
          </div>

          {/* 获胜标题 */}
          <h2 className="text-status-large font-semibold text-neutral-900 mb-2">
            {winnerInfo.name}
          </h2>

          {/* 获胜描述 */}
          <p className="text-body text-neutral-700 mb-4">
            {winnerInfo.description}
          </p>

          {/* 获胜棋子展示 */}
          <div className="flex items-center justify-center space-x-3 mb-4">
            <span className="text-small text-neutral-500">获胜棋子:</span>
            <Piece player={winner} size="large" />
          </div>

          {/* 游戏统计 */}
          <div className="bg-neutral-50 rounded-lg p-4">
            <div className="grid grid-cols-2 gap-4 text-center">
              <div>
                <div className="text-body font-medium text-neutral-900">
                  {moveCount}
                </div>
                <div className="text-small text-neutral-500">
                  总步数
                </div>
              </div>
              <div>
                <div className="text-body font-medium text-neutral-900">
                  {gameMode === 'ai' ? '人机' : '双人'}
                </div>
                <div className="text-small text-neutral-500">
                  游戏模式
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 操作按钮 */}
        <div className="space-y-3">
          <button
            onClick={onRestart}
            className="
              w-full flex items-center justify-center space-x-2
              bg-primary-500 hover:bg-primary-600
              text-white font-semibold py-3 px-4 rounded-md
              transition-all duration-fast
              hover:transform hover:-translate-y-0.5
              focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
            "
          >
            <RotateCcw className="w-4 h-4" />
            <span>再来一局</span>
          </button>

          <button
            onClick={onBackToMode}
            className="
              w-full flex items-center justify-center space-x-2
              bg-neutral-200 hover:bg-neutral-300
              text-neutral-700 font-semibold py-3 px-4 rounded-md
              transition-all duration-fast
              focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2
            "
          >
            <ArrowLeft className="w-4 h-4" />
            <span>返回模式选择</span>
          </button>
        </div>
      </div>
    </div>
  );
};